<template>
<!-- 外卖模式的点单 --> 

<view class="waimaiContainer">
  <view>
    <title-component v-if="title" :receiveData="title"></title-component>
  </view>
  <!-- 左边的导航 -->  
  <scroll-view scroll-y class="leftScrollType">
     <view v-for="(type, index) in productType" :key="index" :data-id="type.id" data-type="two" @tap="getProductType" :class="(type.active?'activeTypeItem':'TypeItem')" :style="'border-bottom:' + (type.active?'2rpx solid '+setting.platformSetting.defaultColor:'') + ';color:' + (type.active?setting.platformSetting.defaultColor:'')">
        <view class="typeName">{{type.name}}</view>
        </view>
       
      <view class="bottomHeight"></view>
  </scroll-view>

  <!-- 右边的商品列表 -->
  <scroll-view scroll-y @scrolltolower="onReachBottom2" class="RightProductContainer">
    <image mode="widthFix" @click.stop="linkUrl" :data-link="currentItem.adverLink" :src="currentItem.adverImg" style="height:200rpx;width:100%" v-if="currentItem.adverImg&&currentItem.adverImg!=', '"></image>
    <view v-if="productTypeTwo.length==0" class="none">
      <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/17/11/9/46_337.jpg?x-oss-process=style/preview_120"></image>
      <text>没有相关分类</text>
    </view>
    <view class="productTypeTwoList">
        <view class="productTypeTwoItem" v-for="(result, index) in productTypeTwo" :key="index" :data-link="'search_product.html?categoryId=' + result.id" @tap="linkUrl">
          <image class="productTypeTwoItemImg" :src="result.iconImage"></image>
          <text>{{result.name}}</text>
        </view>
    </view>
    <view class="bottomHeight"></view>
  </scroll-view>
  <!-- 首页组件-公共产品分类装饰-->
  <custom-page-index-component :receiveData="sendIndexData" v-if="sendIndexData"></custom-page-index-component>

</view>
<!-- 
  <block wx:if='{{pushItem.length > 0}}'>
  <view class='bottomCartContainer' style='background:{{setting.platformSetting.defaultColor}}'>
    <view class='cartInfo' bindtap='showZheshao'>
       <view class='imageCartContainer flexCenter'>
         <image src='https://image1.sansancloud.com/xianhua/2019_12/16/15/56/3_253.jpg?x-oss-process=style/preview_120'></image>
         <view class='countCartNum'>{{countGood}}</view>
       </view>
       <view class='Price'>￥<text class='PRICE'>{{countPrice}}</text></view>
    </view>
    <view class='sureButn' bindtap='linkUrl' data-link="shopping_car_list_new.html">去结算</view>
  </view>
  </block> -->

<!-- <view wx:if='{{pushItem.length > 0}}' class='waimai_cart_container_forTap'> 
    <view class='Tap_cart' >
      <block wx:if='{{!showType}}'><view class='Tap_cart_v1' style='background:{{setting.platformSetting.defaultColor}}' bindtap='showZheshao'>^</view></block>
      <block wx:else><view class='Tap_cart_v2' bindtap='showZheshao'>v</view> </block>
     </view>
  <scroll-view scroll-y class='waimai_cart_container' 
    animation="{{animationData}}">
    <view class='waimai_cart_item' wx:for='{{pushItem}}' wx:for-item='cartI' wx:key='{{index}}'>
        <view class='waimai_cart_item_info'>
          <view class='waimai_cart_item_info_name'>{{cartI.item.name}}</view>
          <block wx:if='{{!!cartI.measureCartensian}}'>
          <view class='waimai_cart_item_info_measureCartensian' >
            <view wx:for='{{cartI.measureCartensian.measurements}}' wx:for-item='mesure' wx:key='{{index}}'>{{mesure.measureName}}</view>
          </view>
          </block>
          <view class='waimai_cart_item_info_price'>
            ￥<text class='waimai_cart_item_info_price2'>{{cartI.carItemPrice}}</text>
          </view>
        </view>
        <view class='waimai_cart_item_nums'>
                <image src='https://image1.sansancloud.com/xianhua/2019_12/16/15/55/32_567.jpg?x-oss-process=style/preview_120' data-id='{{index}}' catchtap='subCartNum'></image>
                <text class='font1'>{{cartI.count}}</text>
            
              <image src='https://image1.sansancloud.com/xianhua/2019_12/16/15/55/32_666.jpg?x-oss-process=style/preview_120' data-id='{{index}}' catchtap='addCartNum' ></image>
        </view>
    </view>
  </scroll-view>
</view> -->
</template>

<script>
// import componentTagTitle from "../../view/partials/title/title";
// import componentCustompage from "../../view/partials/custom_page/index";

export default {
  data() {
    return {
      animationData: {},
      setting: null,
      // setting   
      productTypeTwo: [],
      // 商品数据 
      productType: [],
      currentItem: {},
      sendIndexData: null,
      sysWidth: 320,
      //图片大小
      tab: '',
      topName: {
        SearchProductName: "" //头部搜索的

      },
      canRefresh: true,
      title: null,

      /* 全部参数 */
      params: {
        categoryId: ""
      },
      positionTab: ""
    };
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("===options=====", options);
    let that = this;
    let sendIndexData = JSON.stringify({
      title: 'noTitle',
      url: "product_type_list",
      params: {}
    });
    that.setData({
      sendIndexData: sendIndexData
    });
    that.setData({
      setting: getApp().globalData.setting,
      title: {
        androidTemplate: "pupu_product_search",
        jsonData: {
          bgColor: getApp().globalData.setting.platformSetting.topBgColor,
          title: "请输入关键词搜索"
        }
      }
    });
    wx.setNavigationBarColor({
      frontColor: getApp().globalData.setting.platformSetting.topColor.toLowerCase(),
      backgroundColor: getApp().globalData.setting.platformSetting.topBgColor
    });

    if (options.parentCategoryId) {
      that.setData({
        positionTab: options.parentCategoryId
      });
      options.categoryId = options.parentCategoryId;
      that.getProductType(options.categoryId);
    } else {
      that.getProductType(options.categoryId);
    }

    for (let i in options) {
      for (let j in this.params) {
        if (i.toLowerCase() == j.toLowerCase()) {
          this.params[j] = options[i];
        }
      }
    }

    console.log(this.params);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},
  methods: {
    //获取产品分类
    getProductType: function (e, typeText) {
      console.log("====e=====", e);
      var that = this;
      let categoryId;
      let type = "init";
      let productType = that.productType;
      let productTypeTwo;

      if (e) {
        if (e.currentTarget) {
          categoryId = e.currentTarget.dataset.id;
          type = e.currentTarget.dataset.type;
        } else {
          categoryId = e;
          type = typeText;
        }
      } else {
        categoryId = 0;
      }

      console.log("===type==", type);
      var customIndex = getApp().globalData.AddClientUrl("/wx_get_categories_only_by_parent.html", {
        categoryId: categoryId
      }); // wx.showLoading({
      //   title: 'loading'
      // })

      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading();
          console.log("==res====", res.data);

          if (res.data.errcode == 0) {
            if (type == "init") {
              productType = res.data.relateObj;
              that.setData({
                productType: productType
              });
              console.log("productType", that.productType);
              that.getProductType(productType[0].id, 'first');
            } else {
              productTypeTwo = res.data.relateObj;
              that.setData({
                productTypeTwo: productTypeTwo
              });
              console.log("productTypeTwo", that.productTypeTwo);
            }
          } else {}

          console.log("==productType==", productType);

          if (productType.length != 0) {
            for (let i = 0; i < productType.length; i++) {
              productType[i].colorAtive = '#888';
              productType[i].active = false;
            }

            if (type == "init") {
              productType[0].colorAtive = that.setting.platformSetting.defaultColor;
              productType[0].active = true;
              that.setData({
                currentItem: productType[0]
              });
            } else {
              for (let i = 0; i < productType.length; i++) {
                if (categoryId == productType[i].id) {
                  that.setData({
                    currentItem: productType[i]
                  });
                  productType[i].colorAtive = that.setting.platformSetting.defaultColor;
                  productType[i].active = true;
                }
              }
            }
          }

          that.setData({
            productType: productType
          });
          console.log("that.data.productType", that.productType);
          console.log("that.data.productTypeTwo", that.productTypeTwo);
          wx.hideLoading();
        },
        fail: function (res) {
          console.log("fail");
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    //跳转到订单页面
    linkUrl: function (e) {
      let linkUrl = e.currentTarget.dataset.link;
      getApp().globalData.linkEvent(linkUrl);
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom2: function () {},
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>